<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="商品名称">
            <el-input
              v-model="formInline.name"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品状态">
            <el-select
              v-model="formInline.marketable"
              placeholder="是否上下架"
              @change="fluctuate"
            >
              <el-option label="上架" value="1"></el-option>
              <el-option label="下架" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品分类" class="interval">
            <el-select
              v-model="formInline.goods_cat_id"
              placeholder="请选择商品分类"
            >
              <el-option
                v-for="(item, index) in classification"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="interval"
              >查询</el-button
            >
            <el-button type="primary" @click="onReset" class="interval"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dialogVisible = true"
              >新增商品</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="text item">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          border
          align="center"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          max-height="600"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="55"
            :index="indexMethod"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="" align="center">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="images"
            label="商品图片"
            width="120"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.images"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="logo_wart_type"
            label="水质"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sell_num"
            label="起售数量"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="brand_name"
            label="商品品牌"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="goods_type_id"
            label="商品类型"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="cat_name"
            label="商品分类"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="specifications"
            label="商品规格"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="price"
            label="销售价格"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="costprice"
            label="市场价格"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column prop="unit" label="商品单位" width="" align="center">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="value"
            label="状态"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.marketable"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="上架"
                inactive-text="下架"
                :active-value="1"
                :inactive-value="0"
                @change="switchChange(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handle(scope.row)"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 150, 200, 300]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 新增 -->
    <el-dialog
      title="基础信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="110px" :rules="rules">
        <el-form-item label="商品名称" class="length" prop="name">
          <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品类型" class="length" prop="goods_type_id">
          <el-select v-model="form.goods_type_id" placeholder="请选择商品类型">
            <el-option label=" 默认定制LOGO水" value="5"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品分类" class="length" prop="goods_cat_id">
          <el-select v-model="form.goods_cat_id" placeholder="请选择商品分类">
            <el-option
              v-for="(item, index) in classification"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品品牌" class="length" prop="brand_id">
          <el-select v-model="form.brand_id" placeholder="请选择商品品牌">
            <el-option
              v-for="(item, index) in pinList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="水质" class="length" prop="logo_wart_type">
          <el-select v-model="form.logo_wart_type" placeholder="请选择水质">
            <el-option label="A" value="1"></el-option>
            <el-option label="B" value="2"></el-option>
            <el-option label="C" value="3"></el-option>
            <el-option label="D" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="规格" class="length" prop="specifications">
          <el-input
            v-model="form.specifications"
            placeholder="请输入规格"
            maxlength="15"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="销售价格" class="length" prop="price">
          <el-input
            v-model="form.price"
            placeholder="请输入销售价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="市场价格" class="length" prop="costprice">
          <el-input
            v-model="form.costprice"
            placeholder="请输入市场价格"
          ></el-input>
        </el-form-item>

        <el-form-item label="起购数量" class="length" prop="sell_num">
          <el-input
            v-model="form.sell_num"
            placeholder="请输入起购数量"
          ></el-input>
        </el-form-item>

        <el-form-item label="上下架" class="length" prop="marketable">
          <el-switch
            v-model="form.marketable"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="上架"
            inactive-text="下架"
            :active-value="1"
            :inactive-value="2"
            @change="switchCage(form.marketable)"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否推荐热销" class="length" prop="is_hot">
          <el-switch
            v-model="form.is_hot"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
            @change="switchCage(form.marketable)"
          >
          </el-switch>
        </el-form-item>

        <el-form-item label="单位" class="length" prop="unit">
          <el-select v-model="form.unit" placeholder="请选择单位">
            <el-option
              v-for="item in options"
              :key="item.unit"
              :label="item.unit"
              :value="item.unit"
            >
            </el-option>
            <!-- <el-option label="瓶" value="瓶"></el-option>
            <el-option label="包" value="包"></el-option>
            <el-option label="桶" value="桶"></el-option>
            <el-option label="箱" value="箱"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="商品照片" prop="images">
          <div class="unlBox">
            <el-upload
              class="upload-demo"
              action
              :http-request="uploadFiles"
              ref="upload"
              :limit="fileLimit"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-exceed="handleExceed"
              :before-upload="beforeUpload"
              :show-file-list="false"
              :headers="headers"
              :on-change="fileChange"
            >
              <el-button size="mini" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过5M
              </div>
            </el-upload>
            <el-image
              style="width: 100px; height: 100px"
              :src="form.images"
              fit="cover"
            ></el-image>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="adding('form')">确定添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  customization,
  customized,
  allBrand,
  uploadFiles,
  doAdd,
  batchDel,
  recompose,
  goodSort,
  fluctuate,
  getGoodsUnit,
} from "../../../utils/api";
import { compressImage } from "../../../assets/js/compressImage";
export default {
  data() {
    return {
      token: sessionStorage.getItem("token"),
      //请求特效
      loading: false,
      //请求参数
      goods_type_id: 5,
      mktprice: 1,
      weight: 1,
      stock: 999999999,
      options: [],
      //查询参数
      formInline: {
        name: "",
        marketable: "",
        goods_cat_id: "",
      },
      imgHeader: this.Global.imgHeader,

      //展示的数据
      tableData: [
        {
          name: "",
          images: "",
          images1: "",
          logo_wart_type: "",
          sell_num: "",
          brand_id: "",
          goods_type_id: " ",
          goods_cat_id: "",
          specifications: "",
          price: "",
          marketable: "",
          costprice: "",
          unit: "",
          type_id: "",
          brand_id_text: "",
        },
      ],
      //选择商品品牌
      pinList: [],
      //选择商品分类
      classification: [],
      //上下架展示
      value: true,
      marketable: "",
      //商品分类
      goods_cat_id: "",
      //当前页数
      page: 1,
      limit: 10,
      total: 0,
      //新增
      dialogVisible: false,
      //上传图片
      fileList: [],
      fileType: ["png", "jpg", "jpeg"],
      fileLimit: 1,
      headers: { "Content-Type": "multipart/form-data" },
      srcList2: {},
      //搜集表单数据
      form: {
        name: "",
        price: "",
        goods_type_id: "5",
        unit: "",
        specifications: "",
        sell_num: "",
        logo_wart_type: "",
        goods_cat_id: "",
        brand_id: "",
        images1: "",
        images: "",
        marketable: 1,
        costprice: "",
        id: "",
        type_id: "",
      },
      //校验
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "change" },
        ],
        goods_type_id: [
          { required: true, message: "请选择商品类型", trigger: "change" },
        ],
        goods_cat_id: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
        brand_id: [
          { required: true, message: "请选择商品品牌", trigger: "change" },
        ],
        logo_wart_type: [
          { required: true, message: "请选择水质", trigger: "change" },
        ],
        specifications: [
          { required: true, message: "请输入规格", trigger: "change" },
        ],
        price: [
          { required: true, message: "请输入销售价格", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              if (!reg.test(value)) {
                callback(new Error("请输入大于0且不超过两位小数的数字"));
              }
              if (value > 99999999.99) {
                callback(new Error("不能大于99999999.99"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        costprice: [
          { required: true, message: "请输入市场价格", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              if (!reg.test(value)) {
                callback(new Error("请输入大于0且不超过两位小数的数字"));
              }
              if (value > 99999999.99) {
                callback(new Error("不能大于99999999.99"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        sell_num: [
          { required: true, message: "请输入起购数量", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              var reg = /^[1-9]+[0-9]*]*$/;
              if (!reg.test(value)) {
                callback(new Error("请输入正整数"));
              }
              if (value > 99999999.99) {
                callback(new Error("不能大于99999999.99"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        unit: [{ required: true, message: "请选择单位", trigger: "change" }],
        marketable: [
          { required: true, message: "请选择上下架", trigger: "change" },
        ],
        images: [
          { required: true, message: "商品图片不能为空", trigger: "change" },
        ],
      },
      pinpaiList: [],
    };
  },
  methods: {
    //清空表格
    eliminate() {
      this.$refs.form.resetFields();
      (this.form.name = ""),
        (this.form.goods_type_id = "5"),
        (this.form.unit = ""),
        (this.form.specifications = ""),
        (this.form.sell_num = ""),
        (this.form.logo_wart_type = ""),
        (this.form.goods_cat_id = ""),
        (this.form.brand_id = ""),
        (this.form.images = ""),
        (this.form.costprice = ""),
        (this.form.price = "");
    },
    //查询
    onSubmit() {
      this.goods_cat_id = this.formInline.goods_cat_id;
      this.page = 1;
      this.acquire();
    },
    // 重置
    onReset() {
      this.formInline.name = "";
      this.marketable = "";
      this.formInline.marketable = "";
      this.formInline.goods_cat_id = "";
      this.goods_cat_id = "";
      this.formInline.goods_cat_id = "";
      this.acquire();
    },
    // 获取单位
    getGoodsUnit() {
      this.loading = true;
      getGoodsUnit(this.token, this.page, this.limit, 1).then((res) => {
        console.log(res.data);
        if (res.data.status) {
          this.options = res.data.data.data;
          // this.total = res.data.data.count;
          // this.tableData.forEach((item) => {
          //   item.aavatar = [];
          //   if (item.logo) {
          //     item.aavatar.push("https://bjsf.bjsky.top" + item.logo);
          //   }
          // });
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          this.loading = false;
          this.$message.error(res.data.msg);
          // let timer = setTimeout(()=>{
          //   this.$message.error('错误，请刷新');
          // },5000)
        }
      });
    },

    //表格
    //选择项
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    switchChange(row) {
      if (row.marketable == 1) {
        let marketable = "up";
        this.fluctuates(row.id, marketable);
      } else {
        let marketable = "down";
        this.fluctuates(row.id, marketable);
      }
    },
    //删除
    handle(row) {
      if (row.marketable == 1) {
        this.$message.warning("上架状态下不能删！");
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchDel(this.token, row.id).then((res) => {
            if (res.data.status) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.acquire();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑的回调
    compile() {
      recompose(
        this.token,
        this.form.name,
        this.form.price,
        this.form.type_id,
        this.form.unit,
        this.form.specifications,
        this.form.sell_num,
        this.form.logo_wart_type,
        this.form.goods_cat_id,
        this.form.brand_id,
        this.form.images1,
        this.form.costprice,
        this.form.marketable,
        this.mktprice,
        this.weight,
        this.stock,
        this.form.id,
        this.form.is_hot
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "修改成功",
            type: "success",
            onClose: (res) => {},
          });
          this.acquire();
          this.dialogVisible = false;
          this.$refs["form"].resetFields();
          this.eliminate();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //编辑
    handleEdit(row) {
      if (row.marketable == 1) {
        this.$message.warning("上架状态下不能编辑！");
        return;
      }
      let obj = JSON.parse(JSON.stringify(row));
      this.form = obj;
      this.form.id = obj.id;
      this.form.images1 = obj.images1;
      if (row.logo_wart_type == "A") {
        this.form.logo_wart_type = "1";
      }
      if (row.logo_wart_type == "B") {
        this.form.logo_wart_type = "2";
      }
      if (row.logo_wart_type == "C") {
        this.form.logo_wart_type = "3";
      }
      if (row.logo_wart_type == "D") {
        this.form.logo_wart_type = "4";
      }
      this.dialogVisible = true;
    },
    //关闭弹窗
    handleClose(done) {
      this.eliminate();
      done();
    },
    //上下架
    fluctuates(ids, marketable) {
      this.loading = true;
      fluctuate(this.token, ids, marketable)
        .then((res) => {
          if (res.data.status) {
            this.acquire();
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.loading = false;
              this.$message.error(res.data.msg);
            }, 5000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    switchCage(row) {
      // console.log(row)
    },
    //上传
    uploadFile() {},
    handleRemove() {},
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    //上传文件的格式
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    //这是我自定义的移除事件
    handleClosedelete(i) {
      this.fileList.splice(i, 1); //删除上传的文件
    },
    fileChange(file, fileList) {
      this.fileList = fileList;
    },
    // 压缩文件
    compressFile() {
      let config = {
        quality: 0.5, //默认0.5  0-1
        // width:100,
        // height:100
      };
      this.fileList.forEach(async (item) => {
        // console.log("this.fileList1", this.fileList1);
        console.log("原图size1===>", item.size);
        let result = await compressImage({
          file: item.raw,
          config,
          fileName: item.name,
        });
        console.log("压缩后图片size1===>", result.finalFile.size);
        // this.imageList.push(result);
        this.srcList2 = result.finalFile;
        // console.log("aaa", result.finalFile);
        // console.log("bbb", this.srcList2);
        // console.log("this.srcList", this.srcList);
      });
      // console.log("压缩后图片1===>", this.imageList);
    },
    //上传文件的事件
    uploadFiles(item) {
      this.$message("文件上传中........");
      //上传文件的需要formdata类型;所以要转
      this.compressFile();
      let timer = setTimeout(() => {
        uploadFiles(this.srcList2).then((res) => {
          if (res.data.status != false || res.data.id != null) {
            res.data.data.saveurl; //半截
            res.data.data.weburl; //全拼
            this.form.images1 = res.data.data.saveurl;
            this.form.images = res.data.data.weburl;
            this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
            let i = this.fileList.indexOf(this.srcList2);
            this.handleSuccess();
          }
        });
        clearTimeout(timer);
      }, 1000);
      // uploadFiles(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.form.images1 = res.data.data.saveurl;
      //     this.form.images = res.data.data.weburl;
      //     this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
      //     let i = this.fileList.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    //上传成功后的回调
    handleSuccess() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.handleClosedelete();
    },
    //分页器
    handleSizeChange(val) {
      this.limit = val;
      this.acquire();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.acquire();
    },
    //获取列表数据
    acquire() {
      this.loading = true;
      customization(
        this.token,
        this.page,
        this.limit,
        this.goods_type_id,
        this.marketable,
        this.goods_cat_id,
        this.formInline.name,
        "",
        ""
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData = res.data.data.data;
            this.total = res.data.data.count;
            this.tableData.forEach((item) => {
              if (item.images) {
                item.images = item.images;
                item.images1 = item.images;

                item.images = this.imgHeader + item.images;
              }

              if (item.goods_type_id == 5) {
                (item.goods_type_id = "定制水"), (item.type_id = 5);
              }
              if (item.logo_wart_type == 1) {
                item.logo_wart_type = "A";
              }
              if (item.logo_wart_type == 2) {
                item.logo_wart_type = "B";
              }
              if (item.logo_wart_type == 3) {
                item.logo_wart_type = "C";
              }
              if (item.logo_wart_type == 4) {
                item.logo_wart_type = "D";
              }
              // console.log(this.pinList[this.pinList.findIndex(e => { return e.id == item.brand_id })]);
              // console.log(item, this.pinList[this.pinList.findIndex(e => { return e.id == item.brand_id })].name);
              item.brand_id_text = this.pinList[
                this.pinList.findIndex((e) => {
                  return e.id == item.brand_id;
                })
              ]
                ? this.pinList[
                    this.pinList.findIndex((e) => {
                      return e.id == item.brand_id;
                    })
                  ].name
                : "";
              console.log("pinpaiList", this.pinpaiList);
              this.pinpaiList.forEach((item2, index2) => {
                console.log(item2, "item2");
                item2.child.forEach((item3) => {
                  if (item3.id == item.goods_cat_id) {
                    console.log(item3);
                    item.goods_cat_id_text = item3.name;
                  }
                });
              });
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加商品的回调
    accretion() {
      doAdd(
        this.token,
        this.form.name,
        this.form.price,
        this.form.goods_type_id,
        this.form.unit,
        this.form.specifications,
        this.form.sell_num,
        this.form.logo_wart_type,
        this.form.goods_cat_id,
        this.form.brand_id,
        this.form.images1,
        this.form.costprice,
        this.form.marketable,
        this.mktprice,
        this.weight,
        this.stock,
        this.form.is_hot
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "保存成功",
            type: "success",

            onClose: (res) => {},
          });
          this.acquire();
          this.dialogVisible = false;
          this.eliminate();
          this.$refs["form"].resetFields();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //点击添加
    adding(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            this.compile();
            this.dialogVisible = false;
          } else {
            this.accretion();
            this.dialogVisible = false;
          }
        }
      });
    },
    //获取商品品牌,商品分类
    Optional() {
      allBrand(this.token, 1)
        .then((res) => {
          if (res.data.status) {
            this.pinList = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });

      customized(this.token)
        .then((res) => {
          if (res.data.status) {
            this.classification = res.data.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    //上下架
    fluctuate(marketable) {
      this.marketable = marketable;
      this.acquire();
    },
    //分类
    selectChange(goods_cat_id) {
      this.goods_cat_id = goods_cat_id;
      goodSort(sessionStorage.getItem("token"), 1, "").then((res) => {
        if (res.data.status) {
          this.pinpaiList = res.data.data;
        }
      });
      // this.acquire()
    },
    // 序号排序
    indexMethod(index) {
      if (this.token < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
  },
  async mounted() {
    await this.selectChange("");
    await this.Optional();
    await this.acquire();
    this.getGoodsUnit();
  },
};
</script>

<style scoped>
/* 按钮间隔 */
.interval {
  margin-right: 20px;
}

.length {
  width: 55%;
}

/* /deep/.upload-demo .el-upload--text {
  border: none;
  width: auto;
  height: auto;
} */

.upload-demo {
  line-height: normal;
  margin-bottom: 20px;
}

.upload-demo .el-upload--text {
  border: none;
  width: auto;
  height: auto;
}

.manage {
  margin: 20% 10%;
}

.paging {
  margin-top: 20px;
}
</style>